<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<title>Bootstrap技术</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<script type="text/javascript">
			// 检查用户名是否合法
			function checkUsername() {
				let userName = $("#username").val();
				regexp = /^[a-zA-Z0-9_-]{1,16}$/;
				if (!regexp.test(userName)) {
					$("#username").css("border", "2px solid red");
					$("#failUsername").css("color", "red");
					$("#failUsername").html("用户名未填写");
				} else {
					$("#username").css("border", "2px solid black");
					$("#failUsername").html("");
				}
				
			}
			// 检查电话号码是否合法
			function checkPhone() {
				let phone = $("#phone").val();
				regexp = /^[0-9]{11}$/
				if (!regexp.test(phone)) {
					$("#phone").css("border", "2px solid red");
					$("#failPhone").css("color", "red");
					$("#failPhone").html("手机号不正确");
				} else {
					$("#phone").css("border", "2px solid black");
					$("#failPhone").html("");
				}
			}
			
			function checkAll() {
				checkUsername();
				checkPhone();
			}
		</script>
	</head>
	<body>
		<div class="container">
			<h3 style="text-align: center;" >用户注册</h3>
			<form class="form-horizontal">
				<div class="form-group">
					<label for="username" class="col-sm-2 control-label" style="color: #ffaa00">用户名</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="username" placeholder="请输入用户名"
							onblur="checkUsername()">
						<span id="failUsername"></span>
					</div>
				</div>
				<div class="form-group">
					<label for="phone" class="col-sm-2 control-label " style="color: #ffaa00">手机号</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="phone" placeholder="请输入手机号" onblur="checkPhone()">
						<span id="failPhone"></span>
					</div>
				</div>
				
				
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="button" class="btn btn-warning" onclick="checkAll()">注册</button>
					</div>
				</div>
	</body>
</html>